<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="tripNumber" label="行程编号" width="140" />
    <el-table-column prop="vehicleId" label="车辆编号" width="150" />
    <el-table-column prop="licensePlate" label="车牌号" width="180" />
    <el-table-column prop="type" label="车辆类型" width="180" />
    <el-table-column prop="name" label="驾驶员" width="160" />
    <el-table-column prop="start" label="起始点" />
    <el-table-column prop="end" label="目的地" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="warning" @click="ComeArrange(scope.row.id)">
          安排整备
        </el-button>
        <el-button size="small" type="danger" @click="arrangrFix(scope.row.id)">
          安排维修
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 5]" :size="size"
      :disabled="disabled" :background="background" layout="->, total, sizes, prev, pager, next" :total=total
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus'
import { onMounted, ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { running, comeArrange, ArrangeFix } from '../../api/work.js'

const currentPage4 = ref(1)
const pageSize4 = ref(2)
const total = ref()
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  getRunning();
};

const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  getRunning();
};
const tableData = ref([])

const getRunning = async () => {
  const payload = {
    page: currentPage4.value,
    pageSize: pageSize4.value
  }
  try {
    const result = await running(payload);
    if (result.data.code === 200) {
      tableData.value = result.data.data.recodes;
      total.value = result.data.data.total
    } else {
      ElMessage.error(result.data.msg ? result.data.msg : '未查询到任何信息');
    }
  } catch (error) {
    ElMessage.error("无法获取")
  }
}

const ComeArrange = async(id: number)=>{
    // console.log(id)
    const ids = id;
    try{
      const result = await comeArrange(ids);
        if(result.data.code === 200){
          setTimeout(()=>{
            ElMessage.success("前往整备"),
            getRunning()
          }, 500)
      }else{
        ElMessage.error("错误")
      }
    }catch(error){
      ElMessage.error("错误")
    }
  }

  const arrangrFix = async(id:number)=>{
  const ids = id;
  try{
    const result = await ArrangeFix(ids);
    if(result.data.code === 200){
      setTimeout(() => {
        ElMessage.success('前往维修');
        getRunning();
      }, 500);
    }else{
      ElMessage.error('错误')
    }
  }catch(error){
    ElMessage.error('错误')
  }
}

onMounted(() => {
  setTimeout(()=>{
    getRunning();
  },100)
})
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>